<template>
  <div class="cropper-content">
    <el-dialog title="图片裁剪" v-model="dialogVisible" :show-close="false">
      <el-form class="dialog-footer">
        <i @click.stop="onClose" class="jy-icon-layer-closed btn-close"></i>
        <h3>裁剪比列</h3>
        <el-radio-group v-model="radioRatio" @change="setAspectRatio">
          <el-radio :label="0">原图比列</el-radio>
          <el-radio :label="1">1:1</el-radio>
          <el-radio :label="2">2:1</el-radio>
          <el-radio :label="3">3:1</el-radio>
          <el-radio :label="4">4:3</el-radio>
          <el-radio :label="5">16:9</el-radio>
          <el-radio :label="6" @change="onChangeRatio">
            自定义比列 
          </el-radio>
        </el-radio-group>
        <div style="width: 100%; display: flex;float:left">
          <input-normal :label="''" v-model="ratioWin" :unit="'宽'" style="width: 30%;" @change="onChangeRatio"></input-normal>
          <input-normal :label="''" v-model="ratioHei" :unit="'高'" style="width: 30%;" @change="onChangeRatio"></input-normal>
        </div>
        <p class="btns-con">
          <el-button @click.stop="onClose">取 消</el-button>
          <el-button type="primary" @click.stop="onConfirmCrop">确 定</el-button>
        </p>
      </el-form>
      <div class="cropper">
        <vue-cropper
          ref="cropper"
          :img="url"
          :info="true"
          :canScale="option.canScale"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :autoCrop="option.autoCrop"
          :centerBox="option.centerBox"
          :infoTrue="option.infoTrue"
          :mode="option.mode"
          @realTime="realTime"
          @imgLoad="imgLoad"
        ></vue-cropper>
      </div>
      
    </el-dialog>
  </div>
</template>
<script>
import VueCropper from '@/views/components/vue-cropper.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import { mapState, mapActions } from 'vuex'


export default {
  data() {
    return {
      crap: false,
      option: {
        size: 1,
        canScale: false,
        fixed: true,
        fixedNumber: [1,1], 
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        infoTrue: false,
        centerBox: true,
        cropData: {},
        enlarge: 1,
        mode:"contain"
      },
      downImg: "#",
      ratioWin:1,
      ratioHei:1,
      radioRatio:1,
      ratios:[[0,0], [1,1], [2,1], [3,1], [4,3], [16,9]]
    };
  },
  props: ["dialogVisible"],
  components: { VueCropper, InputNormal },
  computed: {
    ...mapState({
      url: state => state.imgCropPop.url
    })
  },
  updated(){
    if(this.ratios[0][0] == 0 && this.$refs.cropper){
      this.ratios[0] = [this.$refs.cropper.trueWidth,this.$refs.cropper.trueHeight];
    }
  },
  mounted(){
    if(this.$refs.cropper){
      this.setAspectRatio(this.radioRatio);
    }
  },
  methods: {
    ...mapActions({
      cropImg: "components/cropImg",
      updateComponentStyles: "components/updateComponentStyles",
      setImgCropPreview: "setImgCropPreview",
      hiddenImgCropPop: "hiddenImgCropPop"
    }),
    onChangeRatio(){
      this.option.fixedNumber = [this.ratioWin, this.ratioHei];
      this.$refs.cropper.goAutoCrop();
    },
    onClose() {
      this.hiddenImgCropPop();
    },
    onConfirmCrop() {
      //c_crop,h_80,w_80,x_230,y_330
      //axis: {x1: 1, // 左上角x2: 1，// 右上角y1: 1，// 左下角y2: 1 // 右下角}
      // "oper":"c_0-0,w_1000,h_200",
      // "file":"upload/xm/1/1/b92a5dd9-83e5-b15d-f2bc-eab221edeea0.jpg" //首字符不带/
      let imgRect = this.$refs.cropper.getImgAxis();
      let cropRect = this.$refs.cropper.getCropAxis();
      let wid = parseInt(cropRect.x2 - cropRect.x1);
      let hei = parseInt(cropRect.y2 - cropRect.y1);
      let arr = this.url.split("static");
      // let imgWid = imgRect.x2 - imgRect.x1;
      // let imgHei = imgRect.y2 - imgRect.y1;
      // let ratio = getImgRatio(imgWid, imgHei, 1);
      let scale = 1 / this.$refs.cropper.$data.scale;
      let url = this.url;
      let matchArr = arr[0].match(/c_(.*?)(?=[\/])/g);
      let xy = {x:0, y:0};
      if(matchArr){
        let ar = matchArr[0].split(",")[0].split("-");
        xy.x = parseInt(ar[0].split("_")[1]);
        xy.y = parseInt(ar[1]);
        url =  "https://static" + arr[1];
      }else{
        // url = _.replace(this.url, "https://static.hd.xxx.com/", "");
      }
      url = _.replace(url, "https://static.hd.xxx.com/", "");
      //c_180-189,h_424,w_424
      //https://wbcsc.applinzi.com/c_0-877,h_2241,w_2241/7b7/static.hd.xxx.com/upload/biz/1/710233.jpeg
      let params = {
        oper:
          "c_" +
          parseInt(xy.x + (cropRect.x1 - imgRect.x1) * scale) +
          "-" +
          parseInt(xy.y + (cropRect.y1 - imgRect.y1) * scale) +
          ",h_" +
          parseInt(hei * scale) +
          ",w_" +
          parseInt(wid * scale),
        file: url
      };
      this.cropImg(params);

      this.hiddenImgCropPop();
    },
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    setAspectRatio(type){
      this.option.fixedNumber = this.ratios[type];
      this.$refs.cropper.goAutoCrop();
    },
    finish(type) {
      // 输出
      // var test = window.open('about:blank')
      // test.document.body.innerHTML = '图片生成中..'
      if (type === "blob") {
        this.$refs.cropper.getCropBlob(data => {
          var img = window.URL.createObjectURL(data);
          this.model = true;
          this.modelSrc = img;
        });
      } else {
        this.$refs.cropper.getCropData(data => {
          this.model = true;
          this.modelSrc = data;
        });
      }
    },
    // 实时预览函数
    realTime(data) {
      this.setImgCropPreview(data);
    },
    down(type) {
      // event.preventDefault()
      var aLink = document.createElement("a");
      aLink.download = "author-img";
      // 输出
      if (type === "blob") {
        this.$refs.cropper.getCropBlob(data => {
          // console.log(data);
          this.downImg = window.URL.createObjectURL(data);
          // aLink.download = this.downImg;
          // console.log(this.downImg);
          aLink.href = window.URL.createObjectURL(data);
          aLink.click();
        });
      } else {
        this.$refs.cropper.getCropData(data => {
          this.downImg = data;
          aLink.href = data;
          aLink.click();
        });
      }
    },
    showAlert(content) {
      this.$dialog.alert({
        title: '',
        message: content,
      })
    },
    uploadImg(e, num) {
      //上传图片 // this.option.img
      var file = e.target.files[0];
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        this.showAlert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        return false;
      }
      var reader = new FileReader();
      reader.onload = e => {
        let data;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        if (num === 1) {
          this.option.img = data;
        } else if (num === 2) {
          this.example2.img = data;
        }
      }; // 转化为base64 // reader.readAsDataURL(file) // 转化为blob
      reader.readAsArrayBuffer(file);
    },
    imgLoad() {
      // console.log(msg);
    }
  },
};
</script>
<style lang="scss">
.cropper-content {
  .el-dialog{
    width: 910px;
    background-color: #000;
    position: relative;
  }
  .el-dialog__title{
    font-size: 12px;
    color: #FFFFFF;
  }
  .el-dialog__header{
    padding: 10px 20px;
  }
  .el-dialog__body{
    padding: 0 20px;
    padding-bottom: 20px;
  }
  .btns-con{
    text-align: right;
    margin-top: 240px;
  }
  .el-button{
    padding: 10px 50px;
    border-radius: 0;
    
  }
  .btn-close{
    color: #000;
    z-index: 100;
    font-size: 16px;
    display: block;
  }
  .dialog-footer{
    position: absolute;
    top: 0;
    right: 0;
    background-color: #FFFFFF;
    width:320px;
    height: 100%;
    padding: 10px 20px;
    text-align: left;

    i{
      text-align: right;
    }
    h3{
      margin: 10px 0px 20px 0;
    }
    .el-radio-group{
      
    }
    .el-input__inner{
      line-height: 26px;
      height: 26px;
    }
    .el-radio{
      margin: 14px 0;
      display: inline-block;
      width: 50%;
    }
  }
  .cropper {
    width: 550px;
    height: 480px;
    background-color: #FFFFFF;
  }
}
</style>


